<template>
  <div class="discovery">
    <el-tabs v-model="activeName">
			<el-tab-pane v-for="item in tabs" :key="item.name" :label="item.label" :name="item.name">
				<el-row :gutter="20">
					<el-col :span="4" v-for="it in data" :key="it.id">
            <el-card shadow="hover">
              <el-image :src="it.src" :alt="it.alt"></el-image>
              <div>
                <p>{{ it.title }}</p>
              </div>
            </el-card>
					</el-col>
				</el-row>
			</el-tab-pane>
		</el-tabs>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import Image1 from '@/assets/1.jpeg'
import Image2 from '@/assets/2.jpeg'
import Image3 from '@/assets/3.jpeg'
import Image4 from '@/assets/4.jpeg'
import Image5 from '@/assets/5.jpeg'
import Image6 from '@/assets/6.jpeg'
import Image7 from '@/assets/7.jpeg'
import Image8 from '@/assets/8.jpeg'
import Image9 from '@/assets/9.jpeg'
import Image10 from '@/assets/10.jpeg'
import Image11 from '@/assets/11.jpeg'
import Image12 from '@/assets/12.jpeg'
import Image13 from '@/assets/13.jpeg'
import Image14 from '@/assets/14.jpeg'
import Image15 from '@/assets/15.jpeg'

const tabs = [
  { label: '全部', name: 'all'},
  { label: '客厅', name: 'living'},
  { label: '餐厅', name: 'dining'},
  { label: '卧室', name: 'bedroom'},
  { label: '书房', name: 'book'},
  { label: '厨房', name: 'kitchen'},
  { label: '卫生间', name: 'toilet'},
  { label: '玄关', name: 'hallway'},
  { label: '阳台', name: 'balcony'},
  { label: '儿童房', name: 'child'}
]
const first = tabs
	.filter((item, index) => {
		return index == 0
	})[0]
  const activeName = ref(first?.name)
const data = [
  {id: '1',title: '1111111', src: Image1, alt: ''},
  {id: '2',title: '222222', src: Image2, alt: ''},
  {id: '3',title: '33333333', src: Image3, alt: ''},
  {id: '4',title: '44444', src: Image4, alt: ''},
  {id: '5',title: '555555555', src: Image5, alt: ''},
  {id: '6',title: '666666', src: Image6, alt: ''},
  {id: '7',title: '777', src: Image7, alt: ''},
  {id: '8',title: '88', src: Image8, alt: ''},
  {id: '9',title: '9', src: Image9, alt: ''},
  {id: '10',title: '10', src: Image10, alt: ''},
  {id: '11',title: '11', src: Image11, alt: ''},
  {id: '12',title: '12', src: Image12, alt: ''},
  {id: '13',title: '13', src: Image13, alt: ''},
  {id: '14',title: '14', src: Image14, alt: ''},
  {id: '15',title: '15', src: Image15, alt: ''}
]
</script>
<style scoped>
.discovery{
  display: flex;
	justify-content: center;
}
.discovery :deep(
.el-tabs__header
){
  display: flex;
  justify-content: center;
}
.discovery :deep(
.el-tabs__nav-wrap::after
){
  position: relative;
  width: auto;
}
.content{
  display: flex;
}
</style>
